<template>
    <div class="container">
        <el-card>
            <template>
                <div slot="header" class="clearfix">订单详情</div>
                <el-row>
                    <el-col :span="8">
                        <span>客户姓名：</span>
                        <span>{{ orderDetail.customerName || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>客户电话：</span>
                        <span>{{ orderDetail.customerPhone || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>身份证号码：</span>
                        <span>{{ orderDetail.idcard }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <span>序号：</span>
                        <span>{{ `${orderDetail.sn || "-"}` }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>客户来源：</span>
                        <span>{{ orderDetail.customerSource }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>理财经理：</span>
                        <span>{{ orderDetail.financialManager || "-" }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <span>产品名称：</span>
                        <span>{{ orderDetail.productName || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>年化收益率(%)：</span>
                        <span>{{ `${orderDetail.yearIncomeRate || "-"}%` }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>分期方式：</span>
                        <span>{{ orderDetail.calcType }}</span>
                        <span>（{{ `${orderDetail.interval || "0"}个月/期` }}）</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <span>认购金额：</span>
                        <span>{{ `${orderDetail.buyMoney || "-"}元` }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>付息账号：</span>
                        <span>{{ orderDetail.payInterestAccount }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>付息银行：</span>
                        <span>{{ orderDetail.payInterestBank || "-" }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <span>起息时间：</span>
                        <span>{{ orderDetail.valueTime || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>到期时间：</span>
                        <span>{{ `${orderDetail.endTime || "-"}` }}</span>
                    </el-col>
                    <!-- <el-col :span="8">
                        <span>打款金额：</span>
                        <span>{{ `${orderDetail.payMoney || "-"}元` }}</span>
                    </el-col> -->
                    <el-col :span="8">
                        <span>打款时间：</span>
                        <span>{{ orderDetail.payTime || "-" }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <span>付息次数：</span>
                        <span>{{ orderDetail.times || "-" }}</span>
                    </el-col>
                    <el-col :span="8" style="display: flex">
                        <div>附件：</div>
                        <img v-if="orderDetail.attachment" :src="orderDetail.attachment" alt="" />
                        <span v-else>-</span>
                    </el-col>
                </el-row>
            </template>
        </el-card>
        <el-card style="margin-top: 20px" header="领取详情">
            <el-row>
                <el-col :span="24">
                    <span>领取方式：</span>
                    <span>{{ orderDetail.deliveryType == 1 ? "邮寄" : "理财经理" }}</span>
                </el-col>
            </el-row>
            <template v-if="orderDetail.deliveryType == 1">
                <el-row>
                    <el-col :span="8">
                        <span>收件人姓名：</span>
                        <span>{{ orderDetail.consignee || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>收件人电话：</span>
                        <span>{{ orderDetail.consigneePhone || "-" }}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>地址：</span>
                        <span>{{ `${orderDetail.address || "-"}` }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <span>备注：</span>
                        <span>{{ orderDetail.consigneeRemark || "-" }}</span>
                    </el-col>
                </el-row>
            </template>
        </el-card>
        <el-card style="margin-top: 20px">
            <div slot="header" class="clearfix">结息详情</div>
            <el-table :data="list">
                <el-table-column align="center" label="起息时间" prop="beginDate"></el-table-column>
                <el-table-column align="center" label="结息日期" prop="endDate"></el-table-column>
                <el-table-column align="center" label="计息天数" prop="days"></el-table-column>
                <el-table-column align="center" label="付款时间" prop="payDate"></el-table-column>
                <el-table-column align="center" label="付款金额" prop="money"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    import { getDetail, getPayList } from "@/api/order";
    import { Message } from "element-ui";
    import { OrderType, page } from "@/utils/enumConfig";

    export default {
        name: "orderDetail",

        data() {
            return {
                OrderType,
                orderDetail: {},
                list: [],
                isLoading: false,
            };
        },
        async created() {
            let { id } = this.$route.params,
                _this = this;
            this.id = id;
            let detail = await getDetail({ id });
            if (detail) {
                this.orderDetail = detail;
            }
            await this.getPayList();
            console.log(this.list);
        },
        methods: {
            async getPayList() {
                let orderId = this.$route.params.id;
                this.isLoading = true;
                this.list = await getPayList({ id: orderId });
                this.isLoading = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        padding: 20px;
        ::v-deep .el-dialog__body {
            padding: 0 0 20px;
        }
        .el-row {
            margin-bottom: 20px;
            img {
                width: 100px;
                height: 100px;
                object-fit: cover;
            }
            .view {
                color: #1890ff;
                margin-left: 10px;
                cursor: pointer;
            }
        }
    }
    .modal-container {
        .item {
            position: relative;
            width: 100%;
            background: #fff;
            padding: 20px 0 0;
            color: #333;
            font-size: 14px;
            border-bottom: 1px solid #f1f1f1;
            margin-top: 10px;
            .left {
                margin-left: 20px;
                & > div {
                    margin-bottom: 10px;
                }
            }
        }
        .load-more,
        .no-data {
            width: 100%;
            button {
                width: 100%;
                color: #666;
            }
        }
        .no-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #888;
        }
    }
</style>
